<!--
  工作台->计划工单->计划工单监控->巡视设备列表->通信设备详情

-->
<template>
  <div class="equipment-detail-wrap">
    <nav-bar class="header" back title="通信设备详情" @goBack="goBack"/>
    <!-- 光缆状态 -->
    <div class="equipment-state">
      <div class="equipment-state-title">完成状态</div>
      <div class="equipment-state-text equipment-state-on" v-if="completeState ==='未完成'">{{ completeState }}</div>
      <div class="equipment-state-text equipment-state-off" v-if="completeState ==='已完成'">{{ completeState }}</div>
    </div>


    <!-- 光缆信息 -->
    <div class="equipment-info">
      <plateTitle title="基本信息" class="plate-title-1"/>
      <view class="equipment-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in equipmentInfoData" :key="index" :title="item.title" :value="item.value" />
        </van-cell-group>
      </view>


      <plateTitle title="巡视信息" :isRequired="false" class="plate-title-1" v-if="completeState ==='已完成'"/>

      <!-- 巡视照片 -->
      <view class="patrol-info-container" v-if="completeState ==='已完成' && taskResult === '更新'">
        <view>巡视照片</view>
        <van-divider dashed />
        <div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
        <div v-else class="image-wrap">
          <div class="image-list">
            <div
              class="upload-button"
              v-for="(imgItem, index) in files"
              :style="{'background-image': `url(${imgItem.bgImg})`}"
              v-if="imgItem.img"
            >
              <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
            </div>
          </div>
        </div>
        <div v-else style="text-align: center;">
          暂无数据
        </div>
      </view>

      <!-- 备注 -->
      <view class="remark-info-container" v-if="completeState ==='已完成' && taskResult === '更新'">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" disabled :value="textareaValue">
          </textarea>
        </div>
      </view>


      <!-- 巡视结果 -->
      <view class="result-info-container" v-if="completeState ==='已完成'">
        <van-cell-group>
          <van-cell v-for="(item,index) in resultInfoData" :key="index" :title="item.title" :value="item.value" />
        </van-cell-group>
      </view>

      <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
        <van-swipe>
          <div v-for="(image, index) in files" :key="index">
            <van-swipe-item v-if="image.img" style="text-align: center;">
              <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
              <img :src="image.img" />
            </van-swipe-item>
          </div>
        </van-swipe>
      </van-popup>
      
    </div>
   
  </div>
</template>

<script>
let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "铭牌照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../../static/img/bg_mingpai.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
import baseConfig from '../../../../../common/config'
import navBar from "../../../../../components/common/nav-bar";
import plateTitle from '../../../../../components/business/plateTitle.vue';
export default {
  name: "equipmentDetail", // 通信设备详情
  data () {
    return {
      equipmentInfoData: [],
      resultInfoData: [],
      equId:'',
      completeState:'',// 完成状态
      taskResult:'',
      textareaValue:'',
      files: fileTemplate,
      delList: [], // 被删除的列表，需要和后台交互
      showPreview: false,
    }
  },
  components: {
    navBar,
    plateTitle,
  },
  onLoad(e) {
    this.equId = e.id
    this.taskType = e.taskType
    baseConfig.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.getEquDetailsE()
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
  // 获取详情
    getEquDetailsE() {
      let parasm = {
        objId:this.equId,
      }
      this.$api.getEquDetails(parasm).then(res => {
        this.completeState =  res.data.tourState=== 1 ? '已完成':'未完成'
        this.equipmentInfoData = [
          {
            title: "设备名称",
            value: res.data.name
          },
          {
            title: "所属站点",
            value: res.data.sitename
          },
          {
            title: "所属机房",
            value: res.data.parRoom
          },
          {
            title: "所属机柜编号",
            value: res.data.parRack
          },
          {
            title: "所属机柜屏眉",
            value: res.data.parRackScreen
          },
          {
            title: "设备类型",
            value: res.data.techType
          },
          {
            title: "设备归属",
            value: res.data.equlevel
          },
          {
            title: "所属传输系统",
            value: res.data.sysId
          },
          {
            title: "设备品牌",
            value: res.data.producerId
          },
          {
            title: "设备型号",
            value: res.data.modelnumber
          },
          {
            title: "设备顺序",
            value: res.data.serilanum
          },
          {
            title: "运行状态",
            value: res.data.runState
          },
          {
            title: "实物ID",
            value: res.data.entityid
          },
          {
            title: "设备投运时间",
            value: res.data.begTim
          },
        ]
        this.textareaValue = res.data.remark
        if(res.data.serviceState === 1) {
          this.taskResult = '一致'
        }else if(res.data.serviceState === 2) {
          this.taskResult = '不存在'
        }else if(res.data.serviceState === 3) {
          this.taskResult = '新增'
        }else if(res.data.serviceState === 4){
          this.taskResult = '更新'
        }
        this.resultInfoData = [
          {
            title: "巡视结果",
            value: this.taskResult
          },
          {
            title: "巡视人",
            value: res.data.tourOperName
          },
          {
            title: "巡视时间",
            value: res.data.tourTimStr
          },
        ]
        this.files = this.files.map((item) => {
          return {
            ...item,
            img: res.data.photoMap[item.type] ? this.baseUrl + res.data.photoMap[item.type]: '',
          }
        })
      })
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

          })
          .catch(() => {
            // on cancel
          })
      }
    },
    choosePhoto(imgItem, index) {
      wx.chooseImage({
        count:3,
        sourceType: ['album','camera'],
        success: (chooseImageRes) => {
          this.h5_url_to_blob(chooseImageRes.localIds[0]).then(res => {
            this.$set(this.files, index, {
              ...this.files[index],
              raw: res,
              img: chooseImageRes.localIds[0]
            })

            if (this.delList.includes(imgItem.type)) {
              this.delList = this.delList.filter(item => {
                if (item === imgItem.type) {
                  return false;
                }

                return true;
              })
            }

          })
        }
      });
    },
    h5_url_to_blob(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
          if (this.status == 200) {
            var Blob = this.response;
            // console.log(myBlob)
            resolve(Blob)
            // myBlob现在是对象URL指向的blob。 
          }
        };
        xhr.send();
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.equipment-detail-wrap {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242,246,250,1);

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }

  .equipment-state{
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .equipment-state-title {
      font-size: px2vw(42);
    }
    .equipment-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.equipment-state-on {
        color: rgba(255,67,85,1);
        background-color: rgba(255,67,85,0.1);
      }

      &.equipment-state-off {
        color: rgba(65,220,131,1);
        background-color: rgba(65,220,131,0.1);
      }
    }
  }

  
  .equipment-info {
    width: calc(100% - #{px2vw(60)});
    margin: auto;
    padding-bottom: px2vh(30);
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .equipment-info-container, .result-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);
      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        .remark-text {
          height: px2vh(150);
        }
      }
  }

  .patrol-info-container {
    padding: px2vh(70) px2vw(50);
    font-size: px2vw(42);
    color: #666666;
    border-radius: $border-radius-base;
    overflow: hidden;
    background-color: #FFFFFF;
    
    /deep/.van-radio {
      margin-right: px2vw(139.5)
    }

    .image-wrap {
      width: 100%;
      display: flex;
      img {
        width: px2vw(215);
        height: px2vw(215);
        margin-right: px2vw(40);
        border-radius: px2vw(6);
      }

      .image-list {
        width: 100%;
        display: flex;
        .upload-button {
          width: px2vw(215);
          height: px2vw(215);
          background-size: cover;
          margin-right: px2vw(40);
          position: relative;
          .delete-icon {
            position: absolute;
            top: px2vw(-20);
            right: px2vw(-20);
            width: px2vw(40);
            height: px2vw(40);
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
  }
  
  .fibre-info {
    .fibre-rate {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(60);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .fibre-rate-title {
        font-size: px2vw(42);
        color: rgba(65,122,220,1);
        margin-left: px2vw(40);
      }

      .fibre-rate-chart {
        width: px2vw(660);
        height: px2vh(34);
        margin: 0 px2vw(27) 0 px2vw(30);
        background-color: #ECF1FB;
        .fibre-rate-chart-off {
          width: 75%;
          height: 100%;
          background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)},#B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
        }
      }

      .fibre-rate-text {
        font-size: px2vw(42);
        margin-right: px2vw(40);
        font-weight: bold;
        color: #7C7C7C;
        .fibre-rate-off {
          color: #417ADC;
        }
      }
    }
    

  }

  .fibre-content-title {
    width: calc(100% - #{px2vw(80)});
    box-sizing: border-box;
    margin: px2vh(0) px2vw(40) px2vh(18);
    .condition-bar {
      display: flex;
      justify-content: center;
      .condition-item {
        height: px2vh(56);
        background-color: rgba(65,122,220,0.1);
        border: #{px2vw(2)} solid rgba(65,122,220,1);
        color: rgba(65,122,220,1);
        border-radius: px2vw(6);
        font-size: px2vw(30);
        padding: 0 px2vw(16) 0 px2vw(19);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 px2vw(5);
        &:last-child {
          margin-right: 0;
        }
        &.condition-item-checked {
          background-color: rgba(65,122,220,1);
          color: rgba(255,255,255,1);
        }
      }
    }
  }

  .fibre-pair-list {
    .fibre-pair-item {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(40);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .replace-index {
        margin: 0 px2vw(28) 0 px2vw(40);
        width: px2vw(64);
        height: px2vw(64);
        border-radius: 50%;
        background: radial-gradient(circle at center,#417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)},#ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
        color: #ffffff;
        font-size: px2vw(36);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .replace-text {
        font-size: px2vw(42);
        color: #666666;
      }

      .replace-state {
        font-size: px2vw(42);
        margin-right: px2vw(39);

        &.replace-state-on {
          color: #41DC83;
        }

        &.replace-state-off {
          color: #FF4355;
        }
      }

      
    }
  }
}
</style>